<template>
    <div class="goods-specification" v-if="goodsSpecification && Object.keys(goodsSpecification).length > 0">
        <slide-bottom @closeSlideBottom="closeSlideBottom" ref="slideBottom">
            <div class="goods-detail-box positionR">
                <div class="displayFlex ">
                    <span class="goods-header-wimg">
                        <img class="goods-header-img" :src="defaultGoodsSpecification.styleImg" alt="">
                    </span>
                    <div class="flex1 specification-right displayFlex positionR">
                        <!--<div class="goods-numb">-->
                            <!--商品货号：{{defaultGoodsSpecification.itemCode}}-->
                        <!--</div>-->
                        <div class="goods-detail-price">
                            <div class="goods-wprice">{{goodsSpecification.currency || '￥'}}{{defaultGoodsSpecification.price}}</div>
                            <div>商品库存：{{defaultGoodsSpecification.quantity}}件</div>
                        </div>
                        <img class="icon-close" @click="closeSlideBottom" src="../../../../assets/images/cart/slide_down.png" alt="">
                        <!--<span class="iconfont icon-close" @click="closeSlideBottom"></span>-->
                    </div>
                </div>
                <div class="specification-style-choise" v-if="goodsSpecification.itemServerals">
                    <h3 class="specification-style-text">请选择规格款式</h3>
                    <div class="specification-styles">
                        <span class="specification-style-item"
                              :class="{'disabled':value.quantity <= 0,'active':selectIndex == key}"
                              @click="selectIndexFn(key)"
                              v-for="(value,key) in goodsSpecification.itemServerals">
                            {{value.styleName}}
                        </span>
                    </div>
                </div>
                <div class="displayFlex justifyCtBwt padding25px">
                    <span>数量</span>
                    <!--<countor-->
                            <!--:countNumProp="inputNumber"-->
                            <!--@changeInputNumber="changeInputNumber">-->
                    <!--</countor>-->
                    <countor
                            :countNumProp="defaultGoodsSpecification.buyNum"
                            :countProp="defaultGoodsSpecification.inputContent"
                            @changeInputNumber="changeInputNumber">
                    </countor>
                </div>
                <div class="displayFlex justifyCtArd detail-btns">
                    <div v-if="true" class="displayFlex flexCenter width-full">
                        <button @click="addCart" class="detail-btn buy-btn">加入购物车</button>
                        <button @click="buyNow" class="detail-btn add-btn">立即购买</button>
                    </div>
                    <button class="detail-btn add-btn flex1" @click="addCart" v-else>确定</button>
                </div>
            </div>
        </slide-bottom>
    </div>
</template>

<script>
    export default {
        name: "GoodsSpecification",
        props:{
            goodsSpecificationProps:Object
        },
        data(){
            return{
                goodsSpecification:{
                    // itemCode:'11231',
                    // actQuantity:'',
                    // quantityWarn:'',
                    // price:'',
                    // styleImg:'',
                    // itemServerals:[
                    //     {
                    //         maxBuyNum: 40,
                    //         maxWarn: "库存不足，这次就少买点吧!",
                    //         price: "44",
                    //         quantity: 40,
                    //         styleImg: null,
                    //         styleName: "er",
                    //     }
                    // ]
                },
                defaultGoodsSpecification:{
                    // maxBuyNum: 40,
                    // maxWarn: "库存不足，这次就少买点吧!",
                    // price: "44",
                    // quantity: 0,
                    // styleImg: null,
                    // styleName: "er",
                    // itemCode:'1',
                    // buyNum:1,
                    // inputContent:{}，//输入框的控制
                },
                // goodsSpecification:['白色抹胸','白色抹胸婚纱A款','白色抹胸','白色抹胸婚纱','白色抹胸婚纱A款','白色抹胸'],
                inputNumber:1,
                selectIndex:-1,//选择款式的样式
                styleId:0,
                styleName:'',
            }
        },
        mounted(){
            let that = this;
            this.goodsSpecification = Object.assign({},this.goodsSpecification,this.goodsSpecificationProps);
            this.selectIndexFn(-1,true)
        },
        methods:{
            initDefaultGoodsSpecification(goodsSpecification,isInit){
                let that = this;
                let tempObj = {};
                if(isInit){
                    let priceArray = [];
                    console.log(this.goodsSpecification)
                    if( this.goodsSpecification.itemServerals ){
                        this.goodsSpecification.itemServerals.forEach((val,index)=>{
                            priceArray.push(val.price);
                        });
                    }else{
                        priceArray.push(this.goodsSpecification.price);
                    }
                    let price = '- - -';
                    if( Array.isArray(priceArray) && priceArray.length > 1 ){
                        price = Math.min(...priceArray) +'-' +(this.goodsSpecification.currency || '￥')+ Math.max(...priceArray);
                    }else{
                        price = priceArray[0]
                    }
                    tempObj = {
                        maxBuyNum: goodsSpecification.maxBuyNum,
                        buyNum: 1,
                        maxWarn: goodsSpecification.maxWarn,
                        styleImg:goodsSpecification.images && goodsSpecification.images.length > 0 ? goodsSpecification.images[0] : '',
                        price: price,
                        quantity: goodsSpecification.quantity,
                        styleName:null,
                        itemCode:that.goodsSpecification.itemCode,
                        itemId:that.goodsSpecification.itemId,
                    }
                }else{
                    tempObj = {
                        maxBuyNum: goodsSpecification.maxBuyNum,
                        buyNum: 1,
                        maxWarn: goodsSpecification.maxWarn,
                        styleImg:goodsSpecification.styleImg,
                        price: goodsSpecification.price,
                        quantity: goodsSpecification.quantity,
                        styleName:goodsSpecification.styleName,
                        itemCode:that.goodsSpecification.itemCode,
                        itemId:that.goodsSpecification.itemId,
                    }
                }
                let tempCountObj = {
                    inputContent:that.getCountMsg(tempObj)
                };
                this.defaultGoodsSpecification = Object.assign({},that.defaultGoodsSpecification,tempCountObj,tempObj)
            },
            closeSlideBottom(){
                if(this.$refs.slideBottom){
                    this.$refs.slideBottom.showSlide = false;
                    this.defaultGoodsSpecification = {};
                    this.selectIndex = -1;
                    this.selectIndexFn(-1,true)
                    // this.initDefaultGoodsSpecification(this.goodsSpecification,true)
                }
            },
            getCountMsg(goodsSpecificationItem){
                let that = this;
                let countMsg = {};
                if(goodsSpecificationItem.quantity && goodsSpecificationItem.quantity > 0){
                    countMsg = {
                        maxLimit: {
                            isLimit: !!goodsSpecificationItem.maxBuyNum,
                            num: goodsSpecificationItem.maxBuyNum,
                            text: goodsSpecificationItem.maxWarn || '库存不足，这次就少买点吧',
                            showTime: 1000,
                        },
                        minLimit: {
                            isLimit: true,
                            num: 1,
                            text: '最低选一件商品',
                            showTime: 1000,
                        },
                        storeId:that.$route.query.storeId,
                        itemId:goodsSpecificationItem.itemId,
                    }
                }else{
                    countMsg = {
                        maxLimit: {
                            isLimit: true,
                            num: 1,
                            text: '库存不足',
                            showTime: 1000,
                        },
                        minLimit: {
                            isLimit: true,
                            num: 1,
                            text: '库存不足',
                            showTime: 1000,
                        },
                        storeId:that.$route.query.storeId,
                        itemId:goodsSpecificationItem.itemId,
                    }
                }

                return countMsg
            },
            opeSlideBottom(){
                if(this.$refs.slideBottom){
                    this.$refs.slideBottom.showSlide = true;
                }
            },
            selectIndexFn(index,isInit){
                let that = this;
                let goodsSpecificationItem = {};
                if(that.goodsSpecification.itemServerals && that.goodsSpecification.itemServerals.length > 0 && index > -1 ){
                    that.selectIndex = index;
                    goodsSpecificationItem = that.goodsSpecification.itemServerals[index];
                }else{
                    that.selectIndex = -1;
                    goodsSpecificationItem = that.goodsSpecification;
                }
                this.initDefaultGoodsSpecification(goodsSpecificationItem,isInit)
            },
            changeFn(obj){
                this.defaultGoodsSpecification.buyNum = obj
            },
            buyNow(){
                let that = this;
                if(that.goodsSpecification.saleMode == 1 && !that.defaultGoodsSpecification.styleName){
                    this.$root.$emit('toast',{msg:'请选择规格款式'})
                    return;
                }
                let obj = {
                    itemId:that.goodsSpecification.itemId,
                    number:that.defaultGoodsSpecification.buyNum,
                    serveralType:that.defaultGoodsSpecification.styleName,
                    openAlert:false,
                }
                this.$emit('buyNow',obj)
            },
            changeInputNumber(val){
                this.defaultGoodsSpecification.buyNum = val
            },
            addCart(){
                let that = this;
                if(that.goodsSpecification.saleMode == 1 && !that.defaultGoodsSpecification.styleName){
                    this.$root.$emit('toast',{msg:'请选择规格款式'})
                    return;
                }
                let obj = {
                    needAddAnmation:true,
                    itemId:that.goodsSpecification.itemId,
                    buyNum:that.defaultGoodsSpecification.buyNum,
                    serveralType:that.defaultGoodsSpecification.styleName || null,//款式名称
                }
                this.$emit('addCart',obj)
            }
        },
        watch:{
            'defaultGoodsSpecification.buyNum'(val){
                if(val<1){
                    this.defaultGoodsSpecification.buyNum = 1;
                }
            },
            goodsSpecificationProps(val){
                this.goodsSpecification = Object.assign({},this.goodsSpecification,val);
                this.selectIndexFn(-1,true)
                // this.initDefaultGoodsSpecification(this.goodsSpecification,true)
            }
        },

        components:{
            'slide-bottom':()=>import('../../../../components/commonComponents/slideBottom/SlideBottom'),
            'swiper':()=>import('../../../../components/commonComponents/swiperComponent/Swipers'),
            'countor':()=>import('../../../../components/commonComponents/countor/Countor'),
        }
    }
</script>

<style scoped lang="scss">
    .goods-specification /deep/ {
        .input-number{
            border: 1px solid #E6E9F0;
            background-color: #fff;
            color: #000000;
            font-size: .14rem;
            border-radius: .05rem;
            text-align: center;
            width: .6rem;
            height: .32rem;
            line-height: .32rem;
            margin: 0 .1rem;
        }
        .input-btn{
            background-color: #EBEEF5;
            border:none;
            line-height: .22rem;
        }
    }
    .goods-detail-box{
        padding: .15rem;
        height: 100%;
        position: relative;
        overflow: auto;
    }
    .goods-header-wimg{
        display: inline-block;
        width: 1.2rem;
        height: 1.7rem;
    }
    .goods-header-img{
        width: 1.2rem;
        height: 1.7rem;
        object-fit: cover;
        border-radius: .05rem;
    }
    .specification-right{
        padding-left: .17rem;
        flex-direction: column-reverse;
    }
    .goods-wprice{
        color: #FF3333;
        font-size: .18rem;
        padding-bottom: .05rem;
    }
    .icon-close{
        width: .24rem;
        height: .24rem;
        font-size: .17rem;
        position: absolute;
        right: 0;
        top: 0;
    }
    .goods-detail-price,.goods-numb{
        font-size: .11rem;
        color: #666666;
    }
    .goods-numb{
        padding-top:.18rem;
    }
    .specification-style-choise{
        padding-top: .25rem;
    }
    .specification-style-text{
        font-size: .14rem;
        color: #333333;
    }
    .specification-styles{
        padding-top: .15rem;
        flex-wrap: wrap;
        margin-right: -.05rem;
        max-height: 2rem;
        overflow: auto;
    }
    .specification-style-item{
        /*border: 1px solid #ccc;*/
        color: #313233;
        background-color: #EBEEF5;
        font-size: .14rem;
        display: inline-block;
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
        padding: .08rem;
        margin-top: .15rem;
        margin-right: .15rem;
        min-width: .5rem;
        text-align: center;
    }
    .disabled.specification-style-item{
        color: #C4C6CC;
        background-color: #EBEEF5;
    }
    .active.specification-style-item{
        color: #FFFFFF;
        background-color: #ef6055;
    }
    .input-btn{
        display: inline-block;
        border: 1px solid #666;
        border-radius: 50%;
        width: .22rem;
        height: .22rem;
        font-size: .18rem;
        line-height: .2rem;
        text-align: center;
        font-weight: 100;
    }

    .input-wnumber{
        text-align: right;
    }
    .buy-btn{
        border-top-left-radius: .25rem;
        border-bottom-left-radius: .25rem;
        background-color: #f3cb51;
        /*background-image: linear-gradient(to right,#FF7E7D,#FF3E3E);*/
    }
    .add-btn{
        border-top-right-radius: .25rem;
        border-bottom-right-radius: .25rem;
        background-color: #ef6055;
        /*background-image: linear-gradient(to right,#9EBDFF,#5D89E8);*/
    }
    .detail-btn{
        height: .44rem;
        width: 1.48rem;
        text-align: center;
        line-height: .44rem;
        font-size: .16rem;
        color: #fff;
        /*-webkit-box-shadow: 0 0 .05rem 0 #999;*/
        /*-moz-box-shadow: 0 0 .05rem 0 #999;*/
        /*box-shadow: 0 0 .05rem 0 #999;*/
    }
    .detail-btns{
        z-index: 1;
        position: absolute;
        left: 0;
        right: 0;
        bottom: .15rem;
        margin: auto;
        padding: 0 .15rem;
    }
</style>